<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      p {
        width: 200px;
        height: 50px;
        border: 1px solid red;
      }

      /* 1.:empty 选择所有p标签，为空（没有内容）的标签 */
      p:empty {
        background-color: skyblue;
      }

      /* 2.:focus 选择当前获得焦点的表单元素 */
      input:focus {
        background-color: skyblue;
      }

      /* 3.:enabled 选择当前有效的表单元素 */
      input:enabled {
        background-color: salmon;
      }

      /* 4.:disabled 选择当前无效的表单元 */
      input:disabled {
        background-color: green;
      }

      /* 
      5.:checked 选择当前已经勾选的单选按钮或复选框 
      +span 表示input标签后边第一个span标签
    */
      input:checked + span {
        color: red;
      }

      /* 6.:root 选择根元素，即 <html>标签 */
      :root {
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h1>CSS3新增伪类</h1>

    <h2>:empty 选择空标签</h2>

    <p class="para1"></p>
    <p class="para2"></p>
    <p class="para3">艾编程</p>
    <p class="para4"></p>

    <br /><br />

    <h2>:focus 选择当前获得焦点的表单元素</h2>

    <div>
      <input type="text" />
      <input type="text" />
      <input type="text" />
    </div>

    <div>
      <input type="text" />
      <input type="text" disabled />
      <input type="text" />
    </div>

    <br /><br />
    <h2>:checked 选择当前已经勾选的单选按钮或复选框</h2>

    <div>
      <label><input type="checkbox" /><span>篮球</span></label>
      <label><input type="checkbox" checked /><span>乒乓球</span></label>
      <label><input type="checkbox" /><span>书法</span></label>
    </div>
  </body>
</html>
